import React,{ Component } from 'react';
import {messages} from "share/common";
import { Badge, Switch, Icon} from 'antd';

import 'styles/supplier-management/overview/supplier-detail.scss'

class SupplierCard extends Component{

  cardFooterAction = (code, option) => {
    const { callBack } = this.props;
    callBack.func(code, option);
  }

  render(){
    const { cardOption } = this.props;
    return (
      <div className="card-style">
        <div className="card-head">
          <div className="card-img">
            <img src={cardOption.configIco} alt=""/>
          </div>
          <div className="card-text">
            <div className="title">{cardOption.configname}</div>
            <div className="content">{cardOption.configIntroduction}</div>
          </div>
        </div>
        <div className="card-footer">
          <Badge status={cardOption.configStatus === true ? 'success' : 'error'}
                 text={cardOption.configType === 'switch' ?
                   (cardOption.configStatus === true ?
                     messages('supplier.key111'/*已启用*/) :
                     messages('supplier.key157'/*未启用*/)) :
                   (cardOption.configStatus === true ?
                     messages('supplier.key158'/*已设置*/) :
                     messages('supplier.key159'/*未设置*/))} />
          {cardOption.configType !== 'switch' && (
            <a className="config-explain" onClick={() => this.cardFooterAction(cardOption.configCode)}>{cardOption.configTypeExplain}</a>
          )}
          {cardOption.configType === 'switch' && (
            <Switch className="config-explain" style={{marginTop: '10px'}}
                    checkedChildren={<Icon type="check"/>}
                    unCheckedChildren={<Icon type="cross"/>}
                    checked={cardOption.configStatus}
                    onChange={() => this.cardFooterAction(cardOption.configCode,cardOption)}/>
          )}
        </div>
      </div>
    )
  }
}

/*
*  cardOption：（object）    出入参数
*       configIco            string   URL
*       configname           string   标题
*       configIntroduction   string   标题下面的描述
*       configStatus         boolean  卡片左下角圆点颜色，false=>red,true=>green
*       configType           string   'switch' or 'text', 为switch时显示开关按钮，为text显示文字
*       configTypeExplain    string   右下角文字（如果是开关则不显示）
*
*  callBack：(function)      回到函数
* */

export default SupplierCard;

